<template>
  <q-toolbar>
    <q-btn
      flat
      dense
      icon="mdi-view-headline"
      aria-label="Menu"
      @click="toggleLeftDrawer"
    />
    <q-toolbar-title class="text-subtitle2">
      显示/隐藏菜单
    </q-toolbar-title>

    <div>
      <q-btn-group
        push
        flat
      >
        <q-btn
          flat
          round
          color="primary"
          icon="mdi-palette"
          size="md"
        >
          <q-menu>
            <div class="q-pa-md">
              <div class="text-subtitle2 q-mb-md">主题色设置</div>
              <div
                :key="index"
                v-for="(item, index) in styleGroupData"
                class="q-mb-md"
                @click="changeThemeColor(index)"
              >
                <q-btn
                  :style="item.iconStyle.style"
                  text-color="white"
                  flat
                  icon="done"
                  dense
                  v-if="item.iconStyle.checked"
                  style="width: 18px; height: 18px"
                  size="xs"
                />
                <q-btn
                  :style="item.iconStyle.style"
                  text-color="white"
                  flat
                  dense
                  v-else
                  style="width: 18px; height: 18px"
                  size="xs"
                />
                <span class="q-ml-md">{{ item.name }}</span>
              </div>
            </div>
          </q-menu>
        </q-btn>
        <q-btn-dropdown
          :label="userInfo.userName"
          icon="mdi-account-circle"
          type="a"
        >
          <q-list style="min-width: 100px">
            <q-item
              clickable
              v-close-popup
              @click="OpenEditPWDialog"
            >
              <q-item-section>修改密码</q-item-section>
            </q-item>
            <q-separator />
            <q-item
              clickable
              v-close-popup
              @click="logout"
            >
              <q-item-section>退出登录</q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </q-btn-group>
    </div>
  </q-toolbar>
</template>

<script>
import { mapMutations } from 'vuex'
// 引入colors应用程序，进行主题颜色设置
import { colors } from 'quasar'

export default {
  components: {},
  props: {},
  data () {
    return {
      userInfo: {
        userName: '',
        id: 0
      },
      leftDrawer: true,
      editPWDialog: true,
      styleGroupData: this.$utils.styleGroup,
      highlight: {
        logoWhite: false,
        dark: false
      }
    }
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.$api.Account('userinfo', this.$store.state.Authorization).then( result => {
        this.userInfo.userName = result.name
        this.userInfo.id = result.id
        // console.log(result)
        this.getTheme(this.$store.state.Theme)
        // console.log(this.$store.state.Theme)
      }).catch( err => {
        switch (err.response.status) {
          case 401:
            this.$utils.notify('身份信息过期','red-8')
            break
        }
        // 清除vuex中的token
        this.changeLogin({ Authorization: '', Author: '', Roles: '' })
        // 路由跳转
        this.$router.push('/Login', onComplete => {}, onAbort => {});
        // console.log(err.response)
      })
    },

    // 获取主题名称，更改主题颜色
    getTheme(name) {
      this.styleGroupData.map((item) => {
        item.iconStyle.checked = false
        if ( item.name === name) {
          item.iconStyle.checked = true
          // 重置系统默认色盘
          this.resetPalette(item)
        }
      })
    },

    // 重置系统默认色盘,传递侧边栏背景和logo反白参数到父组件
    resetPalette(data) {
      const _palette = Object.keys(data.palette)
      _palette.forEach ( (item) => {
        colors.setBrand ( item, data.palette[item])
      })
      this.highlight =  data.highlight
      this.$emit('highlight', this.highlight)
    },

    // 更改主题颜色
    changeThemeColor(index) {
      this.styleGroupData.forEach ( (item) => {
        item.iconStyle.checked = false
      })
      this.styleGroupData[index].iconStyle.checked = true
      // 重置系统默认色盘
      this.resetPalette(this.styleGroupData[index])
      // 提交色盘信息到后端
      const _upThemeData = {
        UserName : this.$store.state.Author,
        ID : this.userInfo.id,
        Theme: this.styleGroupData[index].name
      }
      this.$api.Account('UpTheme', _upThemeData).then( result => {
        // console.log(result)
        if ( result === 'success') {
            //  重新请求数据列表
            this.$utils.notify('主题色更换成功！', 'positive')
            this.changeTheme({ Theme: this.styleGroupData[index].name })
          } else  {
            this.$utils.notify(result, 'red-8')
          }
      }).catch( err => {
        switch (err.response.status) {
            case 401:
              this.unauthorized()
              break
          }
          console.log(err)
      })
    },

    // 退出登录
    ...mapMutations(['changeLogin', 'changeTheme', 'clearLogin']),
    logout() {
      // 清除vuex中的token
      this.changeLogin({ Authorization: '', Author: '', Roles: '' })
      this.clearLogin()
      // 路由跳转，使用两个空函数，可以避免出现“Uncaught (in promise) undefined”错误
      this.$router.push('/Login', onComplete => {}, onAbort => {});
    },

    // session过期操作
    unauthorized() {
      // 弹出警告框
      this.$utils.notify('身份信息过期','red-8')
      // 清除vuex中的token
      this.changeLogin({ Authorization: '' })
      // 路由跳转
      this.$router.push('/Login', onComplete => {}, onAbort => {});
    },

    // 向父组件传值，控制左边栏的开关
    toggleLeftDrawer() {
      this.$emit('toggle', this.leftDrawer = !this.leftDrawer)
    },

    // 向父组件传值，打开修改密码弹出层
    OpenEditPWDialog() {
      this.$emit('editPWDialog', this.editPWDialog)
    },

  },
  mounted() {
    this.getUserInfo()
  },
}
</script>
<style scoped>
.q-menu {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.08),
    0 3px 1px -2px rgba(0, 0, 0, 0.08);
}
</style>
